<template>
	<view class="shop-order" :class="[bgChangeColor]">
		<view class="top-adr">
			<view class="adr">地址：{{ businessAddress }}</view>
			<view class="phone">联系电话： {{ mobile }}</view>
		</view>

		<view class="order-list">
			<view class="list-item">
				<view class="list-img">
					<image :src="IMG_URL + gamerInfo.links[0].link" mode="scaleToFill"></image>
				</view>
				<view class="list-txt">
					<view class="name" :class="[txtColor]">
						<span :class="[txtColor]">{{ gamerInfo.name }}</span>
						<span :class="[txtColor]">{{ gamerInfo.age }}岁</span>
					</view>

					<view class="intro">{{ gamerInfo.signature }}</view>
					<view style="display: flex">
						<view class="tag" v-for="item in gamerInfo.title" :class="[bgColor]">{{ item }}</view>
					</view>

					<view style="display: flex;margin: auto 5px 5px 0px;">
						<!--            <view class="icon">-->
						<!--              <image src="/static/image/userDetails/logo.jpg" mode="scaleToFill"></image>-->
						<!--            </view>-->
						<!--            <view :class="[txtColor]" style="line-height: 50rpx;font-size: 40rpx">188币</view>-->
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn">

			<view class="money flex-1" :class="[ userData.gender == 2 ?'zy-dark-blue':'zy-dark-red']">
				<view class="icon" :class="[userData.gender == 2 ?'boy-coin':'girl-coin']"></view>
				<view style="flex: 3">{{ gamerInfo.price }}币</view>
			</view>

			<view class="btn flex-1">
				<view>评价</view>
				<view class="btn-view">
					<u-button :custom-style="btnType" type="primary" shape="square">
						<u-icon name="shopping-cart" color="#fff" size="60"></u-icon>
						下单
					</u-button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		GetOnGamer
	} from "../../../api/gamer.js";
	import {
		IMG_URL
	} from "../../../config/URL";

	export default {
		name: "index",
		onLoad(option) {
			let deliverData = JSON.parse(decodeURIComponent(option.data))
			this.businessAddress = deliverData.businessAddress
			this.businessName = deliverData.businessName
			this.gamerId = deliverData.gamerId
			this.mobile = deliverData.mobile
			this.getGamerDetails()
		},
		data() {
			return {
				IMG_URL,
				userData: {
					gender: 1,
				},
				btnType: {
					margin: '0px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					padding: '0px',
					borderRadius: '40rpx',
					marginLeft: '10rpx',
					fontSize: '40rpx'
				},
				businessAddress: '',
				businessName: '',
				gamerInfo: '',
				gamerId: '',
				mobile: '',
			}
		},
		methods: {
			async getGamerDetails() {
				// 获取用户id
				const userInfo = uni.getStorageSync('userInfo');
				const userId = userInfo.id;

				// 获取互娱师详细信息
				this.gamerInfo = await GetOnGamer({
					id: this.gamerId,
					f_user_id: userId,
				});
				this.gamerInfo = this.gamerInfo.data.data;
				this.userData.gender = this.gamerInfo.sex;
			},
		},
		computed: {
			// '男' = 2  '女' = 1
			bgColor() {
				let color = (this.userData.gender == 2 ? 'blue' : 'red')
				return `zy-dark-bg-${color}`
			},

			txtColor() {
				let color = (this.userData.gender == 2 ? 'blue' : 'red')
				return `zy-dark-${color}`
			},

			bgChangeColor() {
				let gender = (this.userData.gender == 2 ? 'boy' : 'girl')
				return `${gender}-bg`
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/lib/css/color.scss";

	.shop-order {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		min-height: 100vh;

		.top-adr {
			padding: 10rpx 50rpx;
			border: solid 1px #847f7d;
			border-radius: 10rpx;
			box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

			.adr {
				font-size: 40rpx;
				font-weight: bolder;
			}

			.phone {
				margin-top: 15rpx;
			}

		}

		.order-list {
			background: linear-gradient(#ffffff, #f3dfec);
			border-radius: 10rpx;
			height: 600rpx;
			margin-top: 30rpx;

			.list-item {
				height: 260rpx;
				display: flex;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				overflow: hidden;

				.list-img {
					flex: 1;
					height: 100%;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list-txt {
					padding-right: 10rpx;
					flex: 1.5;
					display: flex;
					flex-direction: column;
					//background-color: #3F536E;
					height: 100%;
					margin-left: 20rpx;

					.name {
						:nth-of-type(1) {
							font-size: 80rpx;
							margin-right: 20rpx;
						}

						:nth-of-type(2) {
							font-size: 50rpx;
						}
					}

					.intro {
						margin-bottom: 10rpx;
						word-wrap: break-word;
						font-size: 20rpx;
					}

					.tag {
						padding: 5rpx 20rpx;
						border-radius: 10rpx;
						color: white;
						margin-right: 10rpx;

					}

					.icon {
						margin-left: auto;
						margin-right: 10rpx;
						height: 50rpx;
						width: 50rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}
				}

			}
		}

		.bottom-btn {
			margin-top: auto;
			background: white;
			border-radius: 50rpx;
			display: flex;
			justify-content: space-between;

			.money {
				margin-left: 20rpx;
				font-size: 60rpx;
				line-height: 100rpx;
				font-weight: bolder;

				.icon {
					flex: 1;
				}
			}

			.btn {
				padding: 10rpx;

				view {
					font-size: 40rpx;
					line-height: 80rpx;
				}

				.btn-view {
					flex-grow: 1;
					border-radius: 40rpx;
					overflow: hidden;
				}
			}
		}
	}

	.flex-1 {
		display: flex;
		flex: 1;
	}
</style>
